<template>
	<view class="page_body page_bg">


		<!-- 导航栏 -->
		<u-navbar title="" :autoBack="true" title="">
			<view class="u-nav-slot" slot="left" @click="goback()">
				<u-icon name="close" size="19"></u-icon>
			</view>
			<view slot="right">
				<view class="article_btns">
					<u-button shape='circle' size="mini" type="primary" text="发布" color="#007AFF"
								:disabled="!showSubmitBtn" @click="submitForm()">
					</u-button>
				</view>
			</view>
		</u-navbar>


		<!-- 选择话题 -->
		<view class="select_box" @click="openTopicSelect()">
			<view style="display: flex;flex-direction: row;">
				<text class="circle_icon">#</text>
				<text class="circle_title">{{topicInfo.name?topicInfo.name:'选择话题'}}</text>
				<text class="circle_des" v-if="!topicInfo.name">选择合适的话题会有更多赞哦~</text>
				<u-icon name="arrow-right" style="margin: 0 10px;"></u-icon>
			</view>
		</view>



		<!-- 文字输入 -->
		<u--textarea style="margin-top: 84px;" border="none" :focus="true" placeholder="说出你的故事,分享您的快乐..." autoHeight
			v-model="articleForm.content" maxlength="20000">
		</u--textarea>



		<!-- 包括图片、语音、链接、投票 -->
		<view style="padding: 10px;">

			<!-- 上传的图片和视频 -->
			<view class="upload_box">

				<c-upload  ref="uploadFile" :file-type="uploadFleType" v-model="fileList" :autoUpload="false"
					:imageFormData="{compress: true}" :videoFromData="{compress: true}"  :add="fileList.length > 0"
					@videoPlay="playVideo">

					<template #delete>
						<view class="delete">
							<image class="upload_del" src="/static/icon/article/input_colse.png"></image>
						</view>
					</template>
				</c-upload>
			</view>

			<!-- 链接 -->
			<view class="link_box" v-if="articleForm.linkString" @tap="openLinkInput()">
				<image class="link_img" src="../../static/icon/icon_link.png"></image>
				<view class="link_content">{{articleForm.linkString}}</view>
				<image class="link_delete" src="/static/icon/article/input_colse.png" @tap.stop="removeLink()"></image>
			</view>

		</view>




		<!-- 底部功能 -->
		<view class="footer_box">
			<view class="footer_opt">
				<image v-for="(item,index) in inputOpts" :key="index" class="footer_opt_img" :src="item.src"
					:data-index="index" @click="bottomBtnClick(item.type)"></image>
			</view>

			<!-- 键盘站位高度 -->
			<!-- <view class="keyzwf" :style="'height:'+inputOffsetBottom+'px'"></view> -->
		</view>



		<!-- 输入链接弹出层 -->
		<u-popup :show="showLinkInput" :round="10" mode="bottom" @close="showLinkInput = false">
			<view class="link_popup_box">
				<view class="link_popup_box_content">

					<view style="display: flex;flex-direction: row;font-size: 14px;">
						<u-icon name="close" size="20" @tap="showLinkInput = false"></u-icon>
						<view style="flex: 1;text-align: center;">添加链接</view>
						<view style="color: #55AAFF;" @tap="closeAndAddLink">添加</view>
					</view>

					<view class="link_input" style="margin-top: 20px;">
						<u--form labelPosition="left" :model="linkData" :rules="linkFormRules" ref="linkForm">
							<u-form-item label="" prop="tempLinkString">
								<u-input v-model="linkData.tempLinkString" style="background-color: #f5f7fa;"
									placeholder="请输入网页链接" clearable :focus="true" :autoBlur="true" inputAlign="center"
									shape="circle">
								</u-input>
							</u-form-item>
						</u--form>
					</view>

				</view>
			</view>
		</u-popup>



		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>


		<!-- 视频播放 -->
		<video-play ref="play"></video-play>



		<!-- 话题分类弹出层 -->
		<u-popup :show="showTopicPopup" :round="10" mode="bottom" @close="showTopicPopup = false">
			<view>
				<view style="display: flex;flex-direction: row;font-size: 14px;padding: 20px 10px;">
					<u-icon name="close" size="20" @tap="showTopicPopup = false"></u-icon>
					<view style="flex: 1;text-align: center;">选择话题</view>
				</view>
				<topic-select-list ref="topicSelect" @selectTopicBack="closeTopicSelect"></topic-select-list>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import VideoPlay from "@/components/file/videoPlay.vue";
	import CUpload from "@/components/file/cupload.vue"
	import TopicSelectList from "@/pages/topic/cpns/topic-select-list.vue"
	export default {
		components: {
			TopicSelectList,
			CUpload,
			VideoPlay
		},
		data() {
			return {
				// 底部按钮
				inputOpts: [{
						type: 'image', //上传图片
						src: '/static/icon/article/input_img.png'
					},
					{
						type: 'video', //上传视频
						src: '/static/icon/article/input_video.png'
					}, {
						type: 'link', //链接
						src: '/static/icon/article/input_link.png'
					}
				],
				// 话题信息
				topicInfo: {
					id: '',
					name: ''
				},
				// 表单
				articleForm:{
					// 话题id
					topicId: '',
					// 内容
					content: '',
					// 链接
					outsideLink: '',
				},
				// 提交中
				submiting: false,
				// 是否展示话题分类选择弹出层
				showTopicPopup: false,
				// 要上传文件类型
				uploadFleType: 'image',
				// 文件列表
				fileList: [],
				// 是否展示链接输入弹出层
				showLinkInput: false,
				// 链接输入表单
				linkData: {
					tempLinkString: '',
				},
				// 链接输入表单规则
				linkFormRules: {
					'tempLinkString': {
						type: 'string',
						required: true,
						message: '请填入链接',
						trigger: ['blur']
					},
				},

			}
		},
		computed: {
			hasLogin() {
				return this.$authUtil.isLoginedin()
			},
			showSubmitBtn(){
				return this.articleForm.content || this.fileList.length > 0
			}
		},
		onLoad() {

		},
		onShow() {
			if(!this.hasLogin){
				uni.$u.toast('请登录')
				uni.$u.sleep(300).then(() => {
					this.goback()
				})
			}
		},
		methods: {
			goback(){
				uni.navigateBack()
			},
			// 底部上传图片等功能点击事件
			bottomBtnClick(type) {
				switch (type) {
					// 图片上传
					case "image":
						this.uploadFleType = type
						this.$nextTick(() => {
							this.$refs.uploadFile.onClickAdd()
						})
						break;
						// 上传视频
					case "video":
						this.uploadFleType = type
						this.$nextTick(() => {
							this.$refs.uploadFile.onClickAdd()
						})
						break;
						// 链接
					case "link":
						this.openLinkInput()
						break;
					default:
						break;
				}
			},
			// 打开链接输入
			openLinkInput() {
				this.linkData.tempLinkString = ''
				this.showLinkInput = true;
			},
			// 链接输入弹出层点击添加按钮
			closeAndAddLink() {
				let linkReg = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
				// 是否为 http:\\ 或https:// 开头
				let haveHttp = /(https?|http):\/\//.test(this.linkData.tempLinkString)
				if (linkReg.test(this.linkData.tempLinkString)) {
					this.outsideLink = (haveHttp ? '' : 'http://') + this.linkData.tempLinkString
					this.showLinkInput = false;
					return true;
				}
				this.$refs.uToast.show({
					type: 'default',
					message: "链接不符合规则，请重新输入"
				})
			},
			// 移除链接
			removeLink() {
				this.articleForm.outsideLink = ''
			},
			// 打开话题分类
			openTopicSelect() {
				this.showTopicPopup = true;
				this.$nextTick(()=>{
					this.$refs.topicSelect.openCurrent()
				})
			},
			// 关闭话题分类
			closeTopicSelect(val) {
				if (val) {
					this.topicInfo = val
					this.articleForm.topicId = val.id
				}
				this.showTopicPopup = false;
			},
			// 上传文件
			async doUploadFile(){
				await this.$refs.uploadFile.submit().then(reslut=>{})
			},
			async submitForm(){
				if(this.submiting){
					return
				}
				if(!this.articleForm.topicId){
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择话题"
					})
					return
				}
				if(this.fileList.length >0){
					await this.doUploadFile()
				}
				let dataForm = {
					topicId: this.articleForm.topicId,
					content: this.articleForm.content,
					outsideLink: this.articleForm.outsideLink,
					fileList: this.getFileList()
				}
				this.submiting = true
				uni.showLoading({
					title: '正在保存...',
					icon: 'loading',
				})
				this.$httpApi.baseArticlePost('user/article/save',dataForm).then(({ data }) => {
					if (data.code == "000000") {
						uni.hideLoading()
						this.$refs.uToast.show({type: 'success',icon: false,message: '保存成功'})
						uni.$u.sleep(300).then(() => {
							this.goback()
						})
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
						uni.hideLoading()
					}
					this.submiting = false
				}).catch(err => {
					this.submiting = false
					uni.hideLoading()
				})
			},
			// 获取文件列表
			getFileList(){
				return this.fileList.map(item=>{
					return {
						id: item.fileId,
						fileSuffix: item.name.substring(item.name.lastIndexOf(".") + 1)
					}
				})
			},
			// 弹窗播放视频
			playVideo(fileItem) {
				this.$nextTick(()=>{
					this.$refs.play.initPlay(fileItem.item.url)
				})
			}


		}

	}
</script>

<style lang="scss">
	.select_box {
		top: 44px;
		z-index: 99;
		position: fixed;
		padding: 10px 0;
		width: 100%;
		background-color: #f1f1f1;
		align-items: center;
	}



	.circle_icon {
		font-size: 12px;
		height: 18px;
		width: 18px;
		color: #FFFFFF;
		background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
		border-radius: 18px;
		margin-left: 10px;
		margin-right: 2px;
		text-align: center;
	}

	.circle_title {
		margin-left: 4px;
		font-size: 15px;
		color: #0dbad4;
		flex: 1;
	}

	.circle_des {
		font-size: 12px;
		color: #999999;
	}

	// 上传图片
	.upload_box {
		// display: flex;
		// flex-wrap: wrap;
		// flex-direction: row;
	}


	.upload_del {
		// z-index: 9;
		position: absolute;
		top: -10rpx;
		left: 135rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.link_box {
		margin-top: 10px;
		border-radius: 5px;
		background-color: #f1f1f1;
		height: 50px;
		display: flex;
		flex-direction: row;
	}

	.link_img {
		margin: 5px 10px;
		width: 40px;
		height: 40px;
	}

	.link_content {
		flex: 1;
		font-size: 16px;
		line-height: 50px;
		display: -webkit-box;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.link_delete {
		margin-top: -5px;
		margin-right: -5px;
		width: 20px;
		height: 20px;
	}

	.link_popup_box {
		height: 140px;
	}

	.link_popup_box_content {
		padding: 10px;
	}


	.footer_box {
		z-index: 9;
		position: fixed;
		bottom: 0px;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		border: 1upx solid #f1f1f1;
	}

	.footer_opt {
		flex-direction: row;
		padding: 4px;
	}

	.footer_opt_img {
		width: 28px;
		height: 28px;
		margin-left: 10px;
		margin-right: 10px;
	}
</style>
